<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>查看时间胶囊</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body { background: linear-gradient(135deg, #1B263B, #6B7280); color: #FFFFFF; }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h1>{{ capsule.title }}</h1>
        <p>开启日期: {{ capsule.opening_date }}</p>
        {% if can_view %}
            <div>{{ capsule.message|safe }}</div>
        {% else %}
            <p>此时间胶囊尚未到开启时间！</p>
        {% endif %}
        <a href="{% url 'dashboard' %}" class="btn btn-primary mt-3">返回仪表板</a>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>